<!-- @format -->

<template>
    <Input v-focus></Input>
    <div>
        <p>{{ num }}</p>
        <p v-big="num">放大10倍后：{{ num }}</p>
        <button @click="num = num + 10">+</button>
    </div>
    <div v-lc-loading:[title]="loading" v-global-test="'test'">
        <img :src="src" alt="phone" />
    </div>
</template>

<script setup lang="ts">
const num = ref(10);
// v-focus
const vFocus = {
    mounted: (el: any) => {
        el.focus();
    },
};

//v-big
// const vBig = {
//     mounted: (el, binding) => {
//         el.innerText = binding.value * 10;
//         // console.log(binding);
//     },
//     updated: (el, binding) => {
//         el.innerText = binding.value * 10;
//     },
// };

// v-big函数式简写
const vBig = (el: any, binding: any) => {
    el.innerText = binding.value * 10;
};

const src = ref('');
const loading = ref(true);
const title = '华为图片加载中';

// 模拟图片加载延迟
onMounted(() => {
    setTimeout(() => {
        src.value =
            'https://ms.bdimg.com/pacific/0/pic/-1284887113_-1109246585.jpg?x=0&y=0&h=340&w=510&vh=340.00&vw=510.00&oh=340.00&ow=510.00';
        loading.value = true;
    }, 2000);
});
</script>

<style scoped lang="scss"></style>
